<template>
    <ul class="news-content-2">
        <!-- <li>编号：{{ route.params.id }}</li>
        <li>标题：{{ route.params.title }}</li>
        <li>内容：{{ route.params.content }}</li> -->
        <li>编号：{{ id }}</li>
        <li>标题：{{ title }}</li>
        <li>内容：{{ content }}</li>
    </ul>
</template>

<script lang="ts" setup name="">
// 不使用路由器的 props 选项时的 参数接收方法，需要 useRoute，{{ route.params.id }}
// import {useRoute} from 'vue-router'
// const route = useRoute()
// console.log('@', route)
//     // 如果往该组件传 query 参数时传了 id，那么可以通过 route.query.id 拿到
// console.log(route.params)

// 使用路由器的 props 选项后，直接按照 props 方式接收 params 参数
import { withDefaults } from 'vue'
let x = withDefaults(defineProps<{id: string, title: string, content: string}>(), {
    id: '000',
    title: 'no title',
    content: 'no content'
})
console.log('@', x) 
</script>

<style scoped>
.news-content-2{
    list-style: none;
}
</style>